<template>
	<view class="content">
		<view class="header">
			<view class="title">
				<view class="title_left">{{infodata.money}}</view>
				<view class="title_right flexs" style="margin-left: 60rpx;" @click="goBalance">充值</view>
				<view class="title_right flexs" @click="goWallet">立即提现</view>
			</view>
			<view class="header_bom">
				<view class="flexs" @click="goUrl('/luckdraw/pages/user/balance')">
					<view><text>累积提现</text></view>
					<view><text>{{infodata.total}}</text></view>
				</view>
				<view class="flexs" @click="goUrl('/luckdraw/pages/user/coupon')">
					<view><text>累积佣金</text></view>
					<view><text>{{infodata.total_commission}}</text></view>
				</view>
			</view>
		</view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#7E76ED"></u-tabs>
		<view class="section">
			<view class="wain_top" v-for="(item, index) in recordList" :key="index">
				<view class="left">
					<view>{{item.create_time}}</view>
					<view>
						<text v-if="current==0">{{item.desc}}</text>
						<text v-if="current==1">提现金额：{{item.money}},到账金额：{{item.actual_money}}</text>
						<text v-if="current==2">{{item.form_nickname}},消费:{{item.price}}</text>
					 </view>
				</view>
				<view class="right" >
					<view class="top" v-if="current==0 && item.type==1">-￥{{item.num}}</view>
					<view class="top" v-if="current==0 && item.type==2">+￥{{item.num}}</view>
					<view class="top" v-if="current==1">{{item.status_desc}}</view>
					<view class="top" v-if="current==2">+佣金￥{{item.commission}}</view>
					<view class="top" ></view>
				</view>
			</view>
		</view>
		<view class="emptya flex-column flex-c-c" v-if="recordList == ''">
			<!-- <image src="https://pd.pdaxiang.com/upload/static/index/null.png"></image> -->
			<text class="size-32 color-h">暂无记录</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '账户明细'
				},
				{
					name: '提现明细'
				},
				{
					name: '佣金记录'
				}
			],
			current: 0,
			recordList:[],
			infodata:{},
			page:1,
		};
	},
	onLoad() {
		this.getlist()
		this.getuserMoneyRecord()
	},
	onPullDownRefresh() {
		this.page=1;
		this.recordList=[];
		if(this.current==0){
			this.getuserMoneyRecord(2)
		}else if(this.current==1){
			this.getwithdrawalRecord(2)
		}else if(this.current==2){
			this.getcommissionRecord(2)
		}
		this.getlist()
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
		 clearTimeout();
	},
	onReachBottom() {
		this.page++;
		if(this.current==0){
			this.getuserMoneyRecord(2)
		}else if(this.current==1){
			this.getwithdrawalRecord(2)
		}else if(this.current==2){
			this.getcommissionRecord(2)
		}
	},
	methods: {
		//佣金记录
		getcommissionRecord(type){
			let data = {
				page:this.page
			}
			this.$Request.get(this.$api.user.commissionRecord,data).then(res => {
				if(type==2){
					this.recordList = this.recordList.concat(res.data.list) 
					return
				}
				this.recordList = res.data.list
			});
		},
		//提现记录
		getwithdrawalRecord(type){
			let data = {
				page:this.page
			}
			this.$Request.get(this.$api.user.withdrawalRecord,data).then(res => {
				if(type==2){
					this.recordList = this.recordList.concat(res.data.list) 
					return
				}
				this.recordList = res.data.list
			});
		},
		//账户明细
		getuserMoneyRecord(type){
			let data = {
				page:this.page
			}
			this.$Request.get(this.$api.user.userMoneyRecord,data).then(res => {
				if(type==2){
					this.recordList = this.recordList.concat(res.data.list) 
					return
				}
				this.recordList = res.data.list
			});
		},
		getlist(){
			this.$Request.get(this.$api.user.wallet).then(res => {
				this.infodata = res.data
			});
		},
		goBalance(){
			uni.navigateTo({
				url:"/pages/user/rechange"
			})
		},
		goWallet(){
			uni.navigateTo({
				url:"/pages/user/wallet/binding"
			})
		},
		change(index) {
			this.current = index;
			this.recordList = [];
			this.page = 1;
			if(this.current==0){
				this.getuserMoneyRecord()
			}else if(this.current==1){
				this.getwithdrawalRecord()
			}else if(this.current==2){
				this.getcommissionRecord()
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	min-height: 100vh;
	background: #ffffff;
	padding-bottom: 20rpx;
	padding-top: 20rpx;
	.header {
		width: 710upx;
		border-radius: 14upx;
		background: url(https://pd.pdaxiang.com/upload/static/index/tembj.png) no-repeat;
		background-size: 100% 100%;
		min-height: 198upx;
		margin: 0 auto;
		padding: 20rpx 40rpx 46rpx 28rpx;
		display: flex;
		flex-direction: column;
		.title {
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			.title_left {
				max-width: 240rpx;
				font-size: 60rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
				word-break: break-all;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.title_right {
				width: 146rpx;
				height: 44rpx;
				background: #fc5f5f;
				border-radius: 10rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}
		}
		.header_bom {
			display: flex;
			align-items: center;
			justify-content: center;
			.flexs:last-child {
				border: 0;
			}
			.flexs {
				width: 50%;
				height: 86rpx;
				flex-direction: column;
				border-right: 2rpx solid #ffffff;
				view:nth-of-type(1) {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #282828;
					text {
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
					text:nth-child(1) {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
					}
					text:nth-child(2) {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
					}
				}
				view:nth-of-type(2) {
					padding: 0 10rpx 0 10rpx;
					box-sizing: border-box;
					text {
						max-width: 300rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
		.flexs2 {
			.flexs {
				width: 50%;
				flex-direction: column;

				view {
					padding: 10upx 0 20upx 0;
				}
			}
		}
	}
	.section {
		margin-top: 12rpx;
		.wain_top{
			width: 710rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #E1E1E1;
			.right{
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				.top{
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FC5F5F;
				}
				.bom{
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #717171;
					margin-top: 10rpx;
				}
			}
			.left{
				display: flex;
				flex-direction: column;
				view:nth-of-type(1){
					padding: 20rpx 0 20rpx 0rpx;
					font-size: 28rpx;
					color: #333333;
					font-weight: 400;
				}
				view:nth-of-type(2){
					padding: 0 0 32rpx 0rpx;
					text:nth-of-type(1){
						font-size: 30rpx;
						color: #333333;
						font-weight: 400;
					}
					text:nth-of-type(2){
						font-size: 30rpx;
						color: #333333;
						font-weight: 400;
						padding-left: 40rpx;
					}
				}
			}
		}
	}
}
</style>
